<template>
	<div>
		<div class="back"  >
			<div class="code">
				<span style="color: #AAAAAA;font-size: 20px;">×</span>
				<span class="pay">请输入支付密码</span>
			</div>
			<div class="hos">住院充值</div>
			<div class="hos">
				<span class="mon">￥</span>
				<span class="money">{{choosemoney}}</span>
			</div>
			<div class="flex">
				<div class="way">
					支付方式
				</div>
				<div>
					<span class="balance">余额</span>
					<span class="right">></span>
				</div>
			</div>
			<div class="passwordDiv">
				<label class="passwordLabel">
					<ul style="display: flex;justify-content: center;">
						<li><div v-show="password[0]"></div></li>
						<li @click='focus1'><div v-show="password[1]"></div></li>
						<li @click='focus1'><div v-show="password[2]"></div></li>
						<li @click='focus1'><div v-show="password[3]"></div></li>
						<li @click='focus1'><div v-show="password[4]"></div></li>
						<li @click='focus1'><div v-show="password[5]"></div></li>
					</ul>
				</label>
				<input  type="number" focus="true" id="we" v-model="zb" @input="sg" style="position: absolute;top: 25%;height: 50px;opacity: 0;" maxlength="6/"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		        console.log(option.mm); //打印出上个页面传递的参数。
				this.choosemoney=option.mm
		    },
		data(){
			return{
					password:[false,false,false,false,false,false],
					focus:true,
					zb:'',
					choosemoney:''
			}
		},methods:{
			sg(){
				let _self=this;
				console.log(this.zb)
				this.password=[false,false,false,false,false,false]
				for(let i =0;i<this.zb.length;i++){
					this.password[i]=true
				}
				if(this.zb.length==6){
uni.showLoading({
	title: '支付中'
});

setTimeout(function () {
	uni.hideLoading();
	uni.redirectTo({
		url:'./paysuccess?mm='+_self.choosemoney
	})
}, 2000);

				}
			},
		focus1(){
			console.log(1)
			this.focus=true
			console.log(this.focus)
		}
		},watch:{
		focus:function(val){
			console.log(val)
		}
		},
	}
</script>

<style>
	li div{
		width: 8px;
		height: 8px;
		background-color: black;
		border-radius: 5px;
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.passwordLabel li {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #AAAAAA;
		height: 40px;
		line-height: 40px;
		border: 1px solid #dedede;
		flex: 1;
		text-align: center;
	}

	.passwordDiv {
		margin: 10px 0 40px 0;
	}

	.balance {
		font-size: 15px;
	}

	.right {
		font-size: 15px;
		color: #AAAAAA;
		margin-left: 10px;
	}

	.way {
		color: #AAAAAA;
		font-size: 14px;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #f5f5f5;
		margin-top: 20px;
		padding: 5px 0;
	}

	.money {
		font-size: 30px;
	}

	.mon {
		font-size: 16px;
	}

	.pay {
		font-size: 16px;
		margin-left: 90px;

	}

	.hos {
		text-align: center;
		margin-top: 10px;
		font-size: 16px;
	}

	.back {
		background: #fff;
		border-radius: 5px;
		margin: 50px 30px;
		padding: 10px;

	}

	page {
		background: rgb(150, 150, 151);

	}
</style>